<template>
	<gui-modal z-index="1000" ref="privacyModal" width="660rpx" :isCloseBtn="false" :title="title">
		<template v-slot:content>
			<scroll-view scroll-y style="height: 50vh;" class="gui-bg-gray gui-dark-bg-level-2">
				<view class="gui-block gui-text" style="line-height:50rpx; padding:25rpx;position: relative;">
					<rich-text :nodes="nodes"></rich-text>
				</view>
			</scroll-view>
		</template>
		<template v-slot:btns>
			<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
			<view class="gui-flex gui-rows gui-space-between gui-align-items-center">
				<text class="modal-btns gui-block-text gui-color-gray" @tap="agree(false)">不同意</text>
				<text style="height: 40rpx;width: 1rpx;" class="gui-bg-black4"></text>
				<text class="modal-btns gui-block-text gui-color-blue" @tap="agree(true)">同意协议</text>
			</view>
		</template>
	</gui-modal>

</template>

<script>
	import parserHtml from "@/Grace6/js/parserHTML.js";
	export default {
		name: "hyb-privacy",
		props: {
			
			title: {
				type: String,
				default: "入驻协议"
			},
			content: {
				type: String,
				default: ""
			},
			modelValue: {
				type: Boolean,
				default: false
			},

			show: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				nodes: ''
			};
		},

		watch: {
			content(val) {
				this.nodes = parserHtml.parserHTML(this.translate(val));
			}
		},

		created() {
			this.nodes = parserHtml.parserHTML(this.translate(this.content));
			let that = this;
			setTimeout(() => {
				if (that.show) {
					that.open();
				}
			}, 800);

		},

		methods: {
			agree(flag) {
				this.close();
				setTimeout(() => {
					this.$emit('input', flag)
					this.$emit('update:modelValue', flag)
					this.$emit('change', flag)
				})

			},
			open() {
				this.$refs.privacyModal.open();
			},
			close() {
				this.$refs.privacyModal.close();
			},
			translate(str) {
				var arrEntities = {
					lt: "<",
					gt: ">",
					nbsp: " ",
					amp: "&",
					quot: '"'
				};
				return str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function(all, t) {
					return arrEntities[t];
				});
			},
		}
	}
</script>

<style>
	.modal-btns {
		line-height: 100rpx;
		height: 100rpx;
		font-size: 35rpx;
		text-align: center;
		width: 320rpx;
	}
</style>
